<template>
  <div class="comment-item" @click="to_detail">
    <toast ref="toast"/>
    <preview ref="preview"/>
    <div class="item-title">
      <img :src="Comment.avatar" alt="" @click.stop="to_uindex()" />
      <div class="uname" :style="{ color: Comment.color }">
        {{ Comment.nickname }}
      </div>
    </div>
    <div class="content" :style="{ color: Comment.color }" v-html="EmojiHandle(Comment.message)">
    </div>
    <div class="show-img">
      <div 
      class="show-img-item" 
      v-for="img in Comment.img" 
      @click.stop="preview(Comment.img)">
        <img :src="img" alt="" />
      </div>
    </div>
      <div class="item-bottom">
        <div>
          <img src="@/assets/img/square/浏览.svg" alt="" />
          {{Comment.browse}}
        </div>
        <div>
          <img src="@/assets/img/square/评论.svg" alt="" />
          {{comLength}}
        </div>
        <div class="bottom-item" @click.stop="handleClickGreat">
          <img v-if="isClick" src="@/assets/img/square/已点赞.svg" alt="" />
          <img v-else src="@/assets/img/square/未点赞.svg" alt="" />
           {{ Comment.great.length }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { emojis, markArr } from "@/common/emoji";
import Preview from '@/components/Preview/Preview.vue';
import Toast from '@/components/Toast/Toast.vue';
export default {
  components: { Preview, Toast },
  name: "",
  data() {
    return {
     isTalk:false
    };
  },
  props: {
    Comment: {}
  },
  computed: {
    _id() {
      return (
        (this.$store.getters.user._id ? this.$store.getters.user._id:'')
        // JSON.parse(localStorage.getItem("userInfo"))._id ||''
      );
    },
    isClick() {
      return this._id?this.Comment.great.filter(item => item == this._id).length : 0;
    },
    comLength(){
     return this.Comment.coms?this.Comment.coms.length:0
    }
  },
  methods: {
    handleClickGreat() {
      if(!this._id){
        let msg = '请先登录'
        let color = 'Orange'
        this.$refs.toast.show(msg,color)
        return 
      }
      //点赞处理
      let comment = this.Comment;
      let uid = this._id;
      if (this.isClick) {
        console.log("取消点赞");
        comment.great.splice(comment.great.indexOf(uid), 1);
      } else {
        console.log("点赞");
        comment.great.push(uid);
      }
      let data = {
        uid: this._id,
        cid: comment.cid.toString()
      };
      this.$axios({
        url: "/square/clickgood",
        method: "post",
        data: data
      }).then(res => {
        // console.log(res);
      });
    },
    to_detail(){
      if(!this._id){
        let msg = '请先登录'
        let color = 'Orange'
        this.$refs.toast.show(msg,color)
        return 
      }
     let cid = this.Comment.cid
     this.$router.push('/comment_detail/'+ cid)
     console.log('查看话题细节')
    },
    to_uindex() {//跳转用户主页
    if(!this._id){
        let msg = '请先登录'
        let color = 'Orange'
        this.$refs.toast.show(msg,color)
        return 
      }
      let uid = this.Comment.uid;
      this.$router.push("/uindex/" + uid);
      // console.log(uid)
    },
    preview(img){//查看大图
      this.$refs.preview.show(img)
      console.log(img)
    },
    //表情处理函数
    EmojiHandle(msg) {
      console.log(msg);
      let reg = /\[(.*?)\]/g;
      let text = msg.match(reg);
      console.log(text);
      if (text) {
        text.forEach(e => {
          let file = emojis.filter(item => {
            if (item.mark == e) {
              return item.file;
            }
          });
        msg = this.replaceCode(file,msg)
        });
      return msg
        // return msg = msg
      }else{
        return msg
      }
    },
    replaceCode(emojis,content){
      console.log(emojis,content)
      let newContent = ''
      if(emojis==[]){
        return msg
      }
      for(let i = 0; i < emojis.length; i++){
        newContent = content.replace(emojis[i].mark,`<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${emojis[i].file}" >`)
        console.log(newContent)
        // emojisArr.shift()
        // console.log(emojisArr)
        // return this.replaceCode(emojisArr,newContent) 
      }
      return newContent
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.comment-item {
  padding: 10px 8px 10px 8px;
  background-color: #fff;
  border-bottom: 10px solid rgb(177, 175, 175);
}
.item-title {
  /* line-height: 45px; */
  display: flex;
}
.item-title img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.uname {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 16px;
  margin-left: 5px;
  margin-top: 5px;
}
.content {
  padding-top: 10px;
  white-space: normal;
  word-break: break-all;
}
.item-bottom {
  margin-top: 10px;
  display: flex;
}
.item-bottom img {
  width: 24px;
}
.item-bottom div {
  flex: 1;
  text-align: center;
}
.show-img {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  margin-top: 20px;
  width: 100%;
}
.show-img-item {
  margin-left: 5px;
  /* flex: 1; */
  width: 110px;
  height: 110px;
  overflow: hidden;
  /* height: 150px; */
  /* height: 100px; */
}
.show-img img {
  width: 100%;
  /* height: 100%; */
  border-radius: 10px;
}
</style>
